<template>
	<view class="wrap">
		<view class="pic">
			<image src="https://ya30images.hbwlife.com/wxmp/addGroup.png" mode=""></image>
		</view>
		<view class="tips">
			扫码入群可享受优惠
		</view>
		<view class="footer">
			<div class="inputbox">
				<!-- <div class="label">备注：</div> -->
				<div class="red">*</div>
				<u--input v-model="desc" placeholder="请输你在群里的昵称(10个中文字符以内)" @input="handleInput"></u--input>
			</div>
			<div class=" txt" v-if="showTxt">请输入10个中文字以内昵称
			</div>
			<view class="btn" @click="startScan">
				扫码入群
			</view>
		</view>


	</view>
</template>



<script>
	import {
		request,
		requestData
	} from '@/utils/http.js'
	export default {
		data() {
			return {
				desc: '',
				showTxt: false,
				carriedUserid: '',
				user_id: uni.getStorageSync('user_id')
			}
		},
		onLoad(option) {
			if (option && option.carriedUserid) {
				this.carriedUserid = option.carriedUserid;
			}
		},
		onShow() {

		},
		onUnload() {

		},
		methods: {
			handleInput(e) {
				this.desc = e.replace(/[^\u4e00-\u9fa5]/g, '');
				console.log(this.desc)
				if (this.desc.length > 10) {
					this.showTxt = true;
					return
				} else {
					this.showTxt = false;
				}
			},

			startScan() {
				if (this.desc == '') {
					this.showTxt = true;
					return
				} else if (this.desc.length > 10) {
					this.showTxt = true;
					return
				} else {
					this.showTxt = false;
				}
				uni.scanCode({
					success: (res) => {
						this.handleScanResult(res.result);
					},
					fail: (err) => {
						console.error('扫描失败:', err);
					}
				})

			},
			handleScanResult(scanData) {
				//console.log(scanData)       //后端返回的是 biz=group&id=10111700100173563435852557
				let lastEqualIndex = scanData.lastIndexOf("=");
				let result = scanData.substring(lastEqualIndex + 1);

				let paramData = {}
				if (!this.carriedUserid || this.carriedUserid == 'undefined') {
					paramData = {
						user_id: this.user_id,
						group_id: result,
						desc: this.desc
					}
				} else {
					paramData = {
						user_id: this.carriedUserid,
						group_id: result,
						desc: this.desc
					}
				}

				if (scanData.startsWith("biz")) {
					request('/user/group/apply', paramData)
						.then((res) => {
							if (res.code == 0) {
								uni.showToast({
									title: '申请成功',
									icon: 'success',
								})
								if (!this.carriedUserid || this.carriedUserid == 'undefined') {
									setTimeout(() => {
										uni.navigateTo({
											url: `/pagesC/myGroup/index?groupId=${result}`,
										});
									}, 2000)
								} else {
									setTimeout(() => {
										uni.navigateTo({
											url: `/pagesC/myGroup/index?groupId=${result}&carriedUserid=${this.carriedUserid}`,
										});
									}, 2000)
								}
							}
						})
						.catch((err) => {
							console.log(err)
						})

				} else {
					uni.showToast({
						title: '二维码无效',
						icon: 'error',
					})
					return;
				}

			}
		}
	}
</script>

<style scoped>
	.wrap {
		width: 100%;
		height: 100vh;
		box-sizing: border-box;
		background: #fff;
		font-size: 32rpx;
		display: flex;
		flex-flow: column;
		align-items: center;
	}

	.pic {
		width: 160rpx;
		height: 160rpx;
		margin-top: 20%;
	}

	.pic image {
		display: flex;
		justify-content: center;
		align-items: center;
		width: 100%;
		height: 100%;
	}

	.tips {
		width: 90%;
		font-family: 28rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		color: #676a6d;
		margin-top: 50rpx;

	}

	.footer {
		width: 100%;
		position: fixed;
		bottom: 160rpx;
		display: flex;
		flex-flow: column;
		justify-content: flex-start;
		align-items: flex-start;
		padding: 20rpx 30rpx;
		box-sizing: border-box;
	}

	.inputbox {
		display: flex;
		justify-content: flex-start;
		align-items: flex-start;
		width: 100%;
	}

	.label {
		width: auto;
		margin-right: 20rpx;
	}

	.red {
		color: #d52424;
		margin-right: 5rpx;
	}

	.txt {
		color: #d52424;
		margin-left: 20rpx;
		margin-top: 10rpx;
		font-size: 28rpx;
	}

	::v-deep .u-textarea {
		width: 70%;
		box-sizing: border-box;
		min-height: 80rpx;
	}

	::v-deep .u-border {
		/* border: 1px soild red !important */
	}



	.btn {
		background: linear-gradient(to right, #c8a357, #fbde94, #c8a357);
		width: 100%;
		height: 80rpx;
		line-height: 80rpx;
		margin: 0 auto;
		margin-top: 60rpx;
		border-radius: 16rpx;
		color: #333;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	::v-deep .u-button--primary {
		border: none !important;
		// background: linear-gradient(to right, #d5ad57, #cfb58a);
		background-color: $global-color-golden;
	}

	button::after {
		border: none;
	}
</style>